<template>
  <div id="home">
    <nav-bar class="header"><div slot="center">购物街</div></nav-bar>
    <scroll 
    class="home-scroll" 
    ref="scroll"
    :probetype="3"
    @scroll="scrollPosition"
    :pull-up-load="true"
    @pullingUp="loadMore">
      <home-swiper :banners="banners"/>
      <home-recommend :recommends="recommends"/>
      <home-feature/>
      <home-product/>
      <home-floor :messages="messages"/>
      <!-- <page-image :vertical="vertical"/> -->
    </scroll>
    <back-top @click.native="backClick" v-show="isShow"/>
  </div>
</template>

<script>
import HomeSwiper from './childcoms/HomeSwiper'
import HomeRecommend from './childcoms/HomeRecommend'
import HomeFeature from './childcoms/HomeFeature'
import HomeFloor from './childcoms/HomeFloor'

import HomeProduct from './childcoms/HomeProduct'
import NavBar from 'components/common/navbar/NavBar'
import Scroll from 'components/common/scroll/Scroll'

// import PageImage from 'components/content/PageImage'
import BackTop from 'components/content/BackTop'

import {getHomeMultidata,getHomeFloordata} from 'network/home'
import {debounce} from 'common/utils'

export default {
  name:'Home',
  components:{
    HomeSwiper,
    HomeRecommend,
    HomeFeature,
    HomeFloor,
    HomeProduct,
    NavBar,
    Scroll,
    // PageImage,
    BackTop
  },
  data(){
    return{
      banners:[],
      recommends: [],
      messages:[],
      vertical:[],
      isShow:false,
      // 请求的参数
      params:{
        //要获取几条数据
        limit:30,
        // 关键字
        order:"hot",
        // 要跳过几条
        skip:0
      },
      hasMore:true,
      stateY:0
    }
  },
  created(){
    this.getHomeMultidata(),
    this.getHomeFloordata()
    // this.getHomeImagedata()
  },
  mounted(){
    const refresh = debounce(this.$refs.scroll.refresh,20)
    // 监听pageImage组件中图片加载完成
    this.$bus.$on('pageImageLoad',() => {
      refresh()
    })
  },
  methods:{
    getHomeMultidata(){
      getHomeMultidata().then(res => {
        this.banners = res.data.banner.list
        this.recommends = res.data.recommend.list
      })
    },
    getHomeFloordata(){
      getHomeFloordata().then(res => {
        this.messages = res.data.message
      })
    },
    // getHomeImagedata(){
    //   getHomeImagedata(this.params).then(res => {
    //     if(res.data.res.vertical.length === 0){
    //         this.hasMore = false;
    //         return;
    //     }
    //     this.vertical = [...this.vertical,...res.data.res.vertical]

    //     this.$refs.scroll.finishPullUp()
    //   })
    // },
    backClick(){
      this.$refs.scroll.scrollTo(0,0,0)
    },
    scrollPosition(position){
      this.isShow = (-position.y) > 1000
    },
    loadMore(){
      if(this.hasMore){
        this.params.skip += this.params.limit;
        // this.$toast.show('加载中',500)
        // this.getHomeImagedata();
      }
    }
  },
  activated(){
     this.$refs.scroll.scrollTo(0,this.stateY,0)
     this.$refs.scroll.refresh()
  },
  deactivated(){
    this.stateY = this.$refs.scroll.getScrollY()
  }
}
</script>

<style scoped>
#home{
  height:calc(100vh - 44px);
  position: relative;
}
.header{
  color: #fff;
  background: var(--color-tint);
}

.home-scroll{
  overflow: hidden;
  position: absolute;
  top:44px;
  bottom: 0;
  left:0;
  right: 0;
}
</style>